<script lang="ts" setup>
import {ref} from 'vue'
import { UserFilled,Unlock  } from '@element-plus/icons-vue';
import type { FormInstance  } from 'element-plus';
import { ElMessage } from 'element-plus'
import {SignUp,Login} from '@/Api/api.js'

//组合是api的路由使用
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

//这里两个表单都要验证，需要用到两个实例，不然每次提交都是验证一个表单
const ruleFormRef = ref<FormInstance>()
const ruleFormRef1 = ref<FormInstance>()

//登录注册表单切换
const isShow = ref(false)
//记住我
const checked2 = ref(true)

//注册表单的校验规则
//1.校验账号
const validateUs = (rule:any, value:any, callback:any) => {//校验规则，校验的值，回调函数
  const phone = /^1[3456789]\d{9}$/
	const qqEmail = /^[0-9a-zA-Z_-]+@[0-9a-zA-Z_-]+\.(com|cn|net|vip|cloud|aliyun|163|sina)$/ 

	if (value === '') {
    callback(new Error('请输入手机号'))
  } else {
		if(phone.test(value)||qqEmail.test(value)){
			return callback()
		}
    callback(new Error('请输入正确格式的手机号'))
  }
}
//2.校验密码
const validatePd = (rule:any, value:any, callback:any)=>{

	const passwd = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{6,15}$/
	if (value === '') {
    callback(new Error('请输入6~15位由数字字母特殊字符组成的密码'))
  } else {
    if (passwd.test(value)) {
			callback()
    }
    callback(new Error('请输入6~15位由数字字母特殊字符组成的密码'))
  }
}
//3.确认密码
const validatePdEnt = (rule:any, value:any, callback:any)=>{
	if (value === '') {
    callback(new Error('请再次输入密码'))
  } else {
    if (loginForm.value.password != '' && value!=loginForm.value.password) {
      callback(new Error('两次输入密码不一致'))
    }
    callback()
  }
}

//登录注册表单
const loginForm = ref({
	username:'',
	// email:'',
	password:'',
	// 确认密码，注册使用
	rePassword:''
})

//数据校验绑定
const rules = {
  username: [{ validator: validateUs, trigger: 'blur' }],
	password: [{ validator:  validatePd, trigger: 'blur' }],
	rePassword: [{ validator:  validatePdEnt, trigger: 'blur' }],
}

//注册提交
const SignUpSubmitForm = (formE2: FormInstance | undefined) => {
  if (!formE2) return
   formE2.validate(async (valid) => {
    if (valid) {
			try{
				//注册
				const {data:res} = await SignUp(loginForm.value)
				
					ElMessage({
						message: '注册成功,请登录',
						type: 'success',
					})
					isShow.value = !isShow.value
					
					//成功之后要重置表单
					clearFrom()
				
			}catch(e){
				console.log(e)
			}
    } else {
      console.log('注册表单数据未通过')
    }
  })
}

//登录提交
const LoginFrom = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async(valid) => {
    if (valid) {
      //请求登录
			const {data:res} = await Login(loginForm.value)
			
			router.replace('/')
			ElMessage({
				message: "登录成功",
				type: 'success',
			})
			//添加token
			localStorage.setItem('token',res.data)
			
    } else {
      console.log('登录表单数据未通过')
    }
  })
}

//数据清空
const clearFrom = ()=>{
	loginForm.value = {
		username:'',
		password:'',
		rePassword:''
	}
}

</script>

<template>
<el-row class="Login">
    <el-col :span="12" ></el-col>

    <el-col :span="12">
			<!-- 注册表单 -->
			<el-form 
				status-icon
				:rules="rules"
				ref="ruleFormRef1" 
				v-show="isShow"
			 	:model="loginForm"
			  label-width="auto" 
			 style="max-width: 600px"
			 >
				<h1>注册</h1>
				<el-form-item 
					prop="username">
					<el-input
						v-model="loginForm.username"
						style="width: 400px;height:45px"
						placeholder="请输入手机号"
						:prefix-icon="UserFilled"
						
						autocomplete="off"
					/>
				</el-form-item>
				
				<el-form-item
				prop="password">
					<el-input
						v-model="loginForm.password"
						style="width: 400px;height:45px"
						:prefix-icon="Unlock"
						type="password"
						placeholder="请输入6~9位由数字字母特殊字符组成的密码"
						show-password
					/>
				</el-form-item>
				<el-form-item
				prop="rePassword">
					<el-input
						v-model="loginForm.rePassword"
						style="width: 400px;height:45px"
						:prefix-icon="Unlock"
						type="rePassword"
						placeholder="请再次输入密码"
						show-password
					/>
				</el-form-item>
			
				<el-form-item>
					<el-button style="width: 400px;height:45px" type="primary" @click="SignUpSubmitForm(ruleFormRef1)">
						注册
					</el-button>
				</el-form-item>
				<el-form-item>
					<span style="color: #a8abb2;cursor: pointer;" @click="isShow=false;clearFrom()">返回 —</span>
				</el-form-item>
			</el-form>

			<!-- 登录表单 -->
			<el-form v-show="!isShow" 
			ref="ruleFormRef" 
			status-icon 
			:model="loginForm" 
			label-width="auto" 
			style="max-width: 600px"
			:rules="rules">
				<h1>登录</h1>
				<el-form-item
				prop="username">
					<el-input
						v-model="loginForm.username"
						style="width: 400px;height:45px"
						placeholder="请输入账号"
						:prefix-icon="UserFilled"
						
					/>
				</el-form-item>
				
				<el-form-item prop="password">
					<el-input
						v-model="loginForm.password"
						style="width: 400px;height:45px"
						:prefix-icon="Unlock"
						type="password"
						placeholder="请输入密码"
						show-password
					/>
				</el-form-item>
				<el-form-item class="forgetPasswd">
					<div>
						<el-checkbox v-model="checked2">记住我</el-checkbox>
					</div>
					<div class="forget">忘记密码?</div>
				</el-form-item>
				<el-form-item>
					<el-button style="width: 400px;height:45px" type="primary" @click="LoginFrom(ruleFormRef)">
						登录
					</el-button> 
				</el-form-item>
				<el-form-item>
					<span style="color: #a8abb2;cursor: pointer;" @click="isShow = true;clearFrom()">注册 —</span>
				</el-form-item>
			</el-form>

		</el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.Login{
	height: 100%;
	.el-col:first-child{
		background-image: url("@/assets/News.png");
		background-position: center center;
		background-size: cover;
		border-radius: 0 23px 23px 0;
	}
	.el-col:last-child{
		display: flex;
		align-items: center;
		justify-content: center;
		.forgetPasswd{

			.forget{
				position: absolute;
				color: #409eff;
				right: 0;
			}
		}
	}
}
</style>